<template>
  <div class="aside">
    <!-- nav -->
    <el-menu
      :default-active="asideActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
    >
      <div v-for="item in menu" :key="item.label">
        <el-menu-item
          v-if="!item.children"
          :index="item.label"
          :default-active="asideActive"
          @click="clickMenu(item)"
        >
          <i :class="item.icon"></i>
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>

        <el-submenu v-else :index="item.label">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.label }}</span>
          </template>
          <el-menu-item-group
            v-for="subItem in item.children"
            :key="subItem.path"
          >
            <el-menu-item
              :index="subItem.label"
              @click="clickMenu(subItem)"
              :default-active="asideActive"
            >
              {{ subItem.label }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
    <!-- button -->
    <div class="collapse" @click="handleMenu">
      <div class="btn" v-if="isCollapse" style="width: 64px !important">
        <img src="../assets/images/open.png" alt="" />
      </div>
      <div class="btn" v-else>
        <img src="../assets/images/off.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      menu: [
        {
          path: "/",
          name: "overview",
          label: "概览",
          icon: "el-icon-view",
          url: "overview/overview",
        },
        {
          path: "/contentModel",
          name: "contentModel",
          label: "内容模型",
          icon: "el-icon-menu",
          url: "contentModel/contentModel",
        },
        {
          label: "内容集合",
          icon: "el-icon-notebook-2",
          children: [
            {
              path: "/comment",
              name: "Comment",
              label: "评论",
              url: "comment/comment",
            },
            {
              path: "/variety",
              name: "Variety",
              label: "菜品",
              url: "variety/variety",
            },
            {
              path: "/admin",
              name: "Admin",
              label: "管理员",
              url: "admin/admin",
            },
            {
              path: "/banner",
              name: "Banner",
              label: "轮播图",
              url: "banner/banner",
            },
            {
              path: "/paihao",
              name: "Paihao",
              label: "排号",
              url: "paihao/paihao",
            },
            {
              path: "/order",
              name: "Order",
              label: "订单表",
              url: "order/order",
            },
          ],
        },
        {
          path: "/marketing",
          name: "marketing",
          label: "营销工具",
          icon: "el-icon-shopping-bag-2",
          url: "marketing/marketing",
        },
        {
          path: "/webhook",
          name: "webhook",
          label: "webhook",
          icon: "el-icon-discount",
          url: "webhook/webhook",
        },
        {
          path: "/setting",
          name: "setting",
          label: "设置",
          icon: "el-icon-setting",
          url: "setting/setting",
        },
      ],
    };
  },
  computed: {
    asideActive(){
      return this.$store.state.asideActive;
    },
    isCollapse() {
      return this.$store.state.isCollapse;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item) {
      this.$store.commit("updateAsideActive",item.label);
      this.$router.push({
        name: item.name,
      });
    },
    handleMenu() {
      this.$store.commit("collapseMenu");
    },
  },

};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
  max-height: 618px;
}
.el-submenu [class^="el-icon-"] {
  margin: 0;
}
.aside {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
.collapse .btn {
  cursor: pointer;
  position: absolute;
  width: 240px;
  left: 0;
  bottom: 0;
  border-top: 1px solid #f0f0f0;
  background-color: #fff;
  img {
    width: 40px;
    height: 40px;
    padding-top: 5px;
  }
}
.el-menu-item.is-active {
  color: #409eff;
  border-right: 4px solid #0052d9;
}
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
